<template>
	<view class="content dis-flex flex-x-center  flex-dir-column  f-30 login" :style="'height:'+screenHeight+'px !important;'">
		<view class="f-36">
			<img class="logo" src="../../static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="system">
			<u-form :model="form" ref="uForm">
				<u-form-item label="用户名：" prop="username" label-align='center' class='name' label-width='150'>
					<u-input v-model="form.username" />
				</u-form-item>
				<u-form-item label="密 码：" prop="password" class='f-24' label-width='150' label-align='center'>
					<u-input v-model="form.password" type='password' />
				</u-form-item>
				<u-checkbox-group active-color='green' class='f-28 remember'>
					<u-checkbox v-model="is_remember" :label-disabled="false" class='f-w-7'>记住我</u-checkbox>
					<!-- <u-checkbox v-model="is_remember" active-color="success">光影</u-checkbox> -->
				</u-checkbox-group>

			</u-form>
		</view>
		<view>
			<u-button size='medium' class='submit' @click='sign' type="success">登录</u-button>
		</view>

		<view>
			<!-- 图片滑动验证 -->
			<u-popup v-model="movePopup" mode="center" closeable width='700' height='220'>
				<moveVerify v-on:moveSuccess="moveSuccess"></moveVerify>
			</u-popup>
		</view>
		<view>
			<!-- 消息提示 -->
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import CryptoJS from "crypto-js";
	import moveVerify from "@/components/moveVerify.vue"
	export default {
		components: {
			moveVerify
		},
		data() {
			return {
				form: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					}]
				},
				is_remember: true,
				validation: false, // 记住我
				movePopup: false,
				screenHeight: uni.getSystemInfoSync().windowHeight
			}
		},
		onLoad() {
			//判断是否记住密码
			if (localStorage.getItem('username')) {

				this.form.username = localStorage.getItem('username');
				this.form.password = this.$crypto.crypto.Decrypt(localStorage.getItem('password'));
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);

		},
		methods: {
			// 登录
			sign() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.validation) {
							this.$u.api.login({
								username: this.form.username,
								password: this.$crypto.crypto.Encrypt(this.form.password),
							}).then(res => {
								// 跳转到首页
								uni.reLaunch({
									url: '/pages/index/index'
								});
								localStorage.setItem('token', res.token);
								localStorage.setItem('userId', res.data.userId);
								if(res.data.roles){
									 getApp().globalData.roleId = res.data.roles[0].roleId;
								}else{
									 getApp().globalData.roleId = '';
									}
								
								if (this.is_remember) {
									localStorage.setItem("username", this.form.username);
									localStorage.setItem("alias", res.data.alias);
									localStorage.setItem("password", this.$crypto.crypto.Encrypt(this.form.password))
								} else {
									this.clearCookie();
								}
							}).catch(res => {
								this.validation = false;
							})
						} else {
							if (!this.movePopup) {
								this.movePopup = true;
							} else {
								this.$refs.uToast.show({
									title: '验证失败',
									type: 'error',

								})
							}
						}
					} else {
						this.validation = false;

					}
				});
			},
			moveSuccess() {
				this.validation = true;
				this.movePopup = false;
				this.sign();
			},
			// 删除cookie
			clearCookie() {
				localStorage.clear();        
			},
		}
	}
</script>

<style scoped>
	.login {
		background-size: 100% 100%;
		padding-top: 80rpx;
	}

	.system {
		margin-top: 40rpx;
		width: 500rpx;
	}

	.remember {
		margin-top: 20rpx;
	}

	.submit {
		margin-top: 50rpx;
		font-size: 30rpx;
	}

	/deep/ .u-form-item--left__content__label {
		font-weight: 700;
	}

	/deep/ .u-checkbox__label {
		color: #000000;
	}

	/deep/ .u-checkbox__icon-wrap {
		background-color: white;
	}
</style>
